<!DOCTYPE html><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>中国地图</title>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-05-05 15:44:59
    From: https://code.hcharts.cn/highmaps/FSSm7A
*************************************************************************
-->
<div id="container" style="height:450px;"></div>

	<script>
	Highcharts.setOptions({
    lang: {
        drillUpText: '< 返回 “{series.name}”'
    }
});
var map = null,
    geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/',
    unDrilldown = ['taiwan', 'xianggang', 'aomen'];
// 获取中国地图数据并初始化图表
$.getJSON(geochina + 'china.json&callback=?', function(mapdata) {
    var data = [];
    // 随机数据
    Highcharts.each(mapdata.features, function(md, index) {
        data.push({
            name: md.properties.name,
            drilldown: md.properties.filename,
            value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
        });
    });
    map = new Highcharts.Map('container', {
        chart: {
            events: {
                drilldown: function(e) {
                    // 异步下钻
                    if (e.point.drilldown && unDrilldown.indexOf(e.point.drilldown) === -1) {
                        var pointName = e.point.properties.fullname;
                        map.showLoading('下钻中，请稍后...');
                        // 获取二级行政地区数据并更新图表
                        $.getJSON(geochina +   e.point.drilldown + '.json&callback=?', function(data) {
                            data = Highcharts.geojson(data);
                            Highcharts.each(data, function(d) {
                                d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                            });
                            map.hideLoading();
                            map.addSeriesAsDrilldown(e.point, {
                                name: e.point.name,
                                data: data,
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            });
                            map.setTitle({
                                text: pointName
                            });
                        });
                    }
                },
                drillup: function() {
                    map.setTitle({
                        text: '中国'
                    });
                }
            }
        },
        title: {
            text: '中国地图'
        },
        subtitle: {
            text: '<a href="https://www.hcharts.cn/mapdata">点击查看地图数据及详情</a>'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        tooltip: {
            useHTML: true,
            headerFormat: '<table><tr><td>{point.name}</td></tr>',
            pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
            '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
            '<tr><td>父级</td><td>{point.properties.parent}</td></tr>' +
            '<tr><td>经纬度</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>' ,
            footerFormat: '</table>'
        },
        colorAxis: {
            min: 0,
            minColor: '#fff',
            maxColor: '#006cee',
            labels:{
                style:{
                    "color":"red","fontWeight":"bold"
                }
            }
        },
        series: [{
            data: data,
            mapData: mapdata,
            joinBy: 'name',
            name: '中国地图',
            states: {
                hover: {
                    color: '#a4edba'
                }
            }
        }]
    });
});
</script>

</body></html>